<script lang="ts" setup>
import Item from './TabContainer/Item.vue'
import type {ICategoryResponse} from '@/typings/api'

defineProps<{
    categoryList: ICategoryResponse
}>()

const {categoryState} = $(useCategory())

const active = computed(() => {
    // 未选中其他分类或者选中了全部
    return !categoryState?.categoryParentId || categoryState.categoryParentId === -1
})
</script>

<template>
    <view class="tab">
        <Item :id="-1" title="全部" :active="active"/>
        <Item v-for="item in categoryList" :id="item.id" :key="item.name" :title="item.name"
              :active="categoryState?.categoryParentId === item.id"/>
    </view>
</template>

<style lang="scss" scoped>
.tab {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20rpx 35rpx 0 35rpx;
}
</style>
